<template>
	<view class="page">
		<view class="mask" :style="{ background: `url(${currentMusicDetail.al.picUrl}) no-repeat center center`, backgroundSize: 'cover' }">
			<!-- <image :src="currentMusicDetail.coverImg" mode="center"></image> -->
			<view class=""></view>
		</view>
		<view class="pageee">
			<navbar :showMenu="false" :showDown="true" :isDocument="true">
				<view class="musicInfo">
					<text>{{currentMusicDetail.name}}</text>
					<text>{{currentMusicDetail.ar[0].name}}</text>
				</view>
			</navbar>
			
		
			<!-- 主体 -->
			<view class="content" :style="{ height: `calc(100% - (${ parseInt(navbarMessage.height) + 270 + 'rpx' }))` }">
				<!-- 黑胶唱片 -->
				<view class="hgBox" v-show="contentType == 'hg'" @click="changeContent('lyric')">
					<!-- 滑竿 -->
					<view :class="isPlayingMusic ? 'playing-bar hgBar' : 'paused-bar hgBar'">
						<image src="/static/images/musicBara.png"></image>
					</view>
					<!-- 黑胶盘 -->
					<view :class="isPlayingMusic ? 'hgCover running' : 'hgCover paused'">
						<image src="/static/images/disk.png"></image>
						<image :src="currentMusicDetail.al.picUrl"></image>
					</view>
				</view>
				<!-- 歌词 -->
				<view class="lyricBox" v-show="contentType == 'lyric'" @click="changeContent('hg')">
					<lyric :lyrics="lyric"  @toCover="contentType = 'hg'" :areaStyle="lyricArea" :lyricStyle="lyricFontStyle" :curTime="currentPlayTime"></lyric>
				</view>
			</view>
			
			<!-- 第一列操作项 -->
			<view class="operation">
				<image :src="like ? '/static/images/liked.png' : '/static/images/unLike.png'" @click="likeMusic" mode="widthFix"></image>
				<image src="/static/images/download.png" mode="widthFix"></image>
				<image src="/static/images/collect.png" mode="widthFix"></image>
				<image src="/static/images/comments.png" mode="widthFix"  @click="toComments"></image>
				<image src="/static/images/mv.png" mode="widthFix" @click="playMv"></image>
			</view>
			
			<!-- 进度条 -->
			<view class="playingProgress">
				<text>{{$tools.StoM(currentPlayTime)}}</text>
				<view class="slider" @click="aa">
					<u-slider v-model="playingProgress" active-color="#fff" height="4" block-width="22" @end="changeSilder"></u-slider>
				</view>
				<text>{{$tools.StoM(currentMusicLong)}}</text>
			</view>
			
			<!-- 第二列操作项 -->
			<view class="musicControl">
				<view class="image" @click="changeMode">
					<image :src="getPlayMode(playMode).icon" mode="widthFix"></image>
				</view>
				<view class="image">
					<image src="/static/images/lastSong.png" @click="changeMusicByBtn('last')" mode="widthFix"></image>
				</view>
				<view class="image">
					<image :src="isPlayingMusic ? '/static/images/paused.png' : '/static/images/playing.png'" @click="playMusic" mode="widthFix"
					 style="width: 90%;"></image>
				</view>
				<view class="image">
					<image src="/static/images/nextSong.png" @click="changeMusicByBtn('next')" mode="widthFix"></image>
				</view>
				<view class="image">
					<image src="/static/images/playList-w.png" @click="showPlayList" mode="widthFix"></image>
				</view>
			</view>
			
			<!-- 播放列表 -->
			<u-popup class="playListPopup" v-model="playListPopup" mode="bottom" border-radius="30" z-index="9999999999" height="60%"
			 :custom-style="popStyle">
				<view class="popupHeader">
					<view class="title">
						<text style="font-size: 32rpx;font-weight: bolder;">播放列表</text>
						<text style="font-size: 24rpx;color: #666;">({{currentPlayList.length ? currentPlayList.length : 0}})</text>
					</view>
					<view class="playMode" @click="changeMode">
						<image :src="getPlayMode(playMode).icon" mode="widthFix"></image>
						<text>{{getPlayMode(playMode).name}}</text>
					</view>
				</view>
			
				<view style="padding: -20rpx 0 20rpx;">
					<view class="playList" v-for="(item,index) in currentPlayList" :key="index" @click="changeMusic(item.id)">
						<view :class="currentMusicId == item.id ? 'songInfo playing' : 'songInfo'">
							<image v-show="currentMusicId == item.id" src="/static/images/play-red.png" mode="widthFix"></image>
							<text>{{item.name}}</text>
							<text :style="{ color: currentMusicId == item.id ? '#fe5756' : '#666' }">-{{item.ar[0].name || item.artists[0].name}}</text>
						</view>
						<view class="del" @click.stop="delPlayListSong(index)">
							<image src="/static/images/x.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 50rpx;"></view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import Navbar from '@/components/navbar.vue'
	import lyric from '@/components/lyric.vue'
	import { likeMusic } from '@/api/music.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			Navbar,
			lyric
		},
		data() {
			return {
				playModeList: [{
						mode: 'loop',
						name: '列表循环',
						icon: '/static/images/loop-w.png'
					},
					{
						mode: 'singleLoop',
						name: '单曲循环',
						icon: '/static/images/singleLoop-w.png'
					},
					{
						mode: 'random',
						name: '随机播放',
						icon: '/static/images/random-w.png'
					}
				],
				lyricFontStyle:{
					color: '#aaa',
					activeColor: '#fff',
					fontSize: '32rpx',
					selectedBGColor: 'rgba(0,0,0,.5)',
					
				},
				lyricArea: {
					height: '1000rpx',
					background: 'transparent'
				},
				opacity: 1,
				playingProgress: 0,
				playListPopup: false,
				contentType: 'hg',
				like: false,
				popStyle: {
					width: '690rpx',
					marginLeft: '30rpx',
					marginBottom: '40rpx',
					borderRadius: '25rpx'
				}
			}
		},
		onLoad() {
			this.playingProgress = parseInt((this.currentPlayTime / this.currentMusicLong) * 100)
			this.getCurrentPlayTime()
		},
		watch: {
			currentPlayTime(e) {
				if (this.currentMusicLong != 0) {
					this.playingProgress = parseInt((e / this.currentMusicLong) * 100)
				}
			},
			// currentMusicDetail(e) {
			// 	this.opacity = 0
			// 	this.like = false
			// 	let s = setInterval(() => {
			// 		this.opacity += 0.1
			// 		if(this.opacity == 1) clearInterval(s)
			// 	},70)
			// }
		},
		computed: {
			...mapState(['navbarMessage', 'currentMusicId', 'isPlayingMusic', 'currentMusicDetail', 'playMode',
				'currentPlayList', 'lyric',
				'currentPlayTime', 'currentMusicLong'
			])
		},
		methods: {
			...mapMutations(['changeMusicPlayStatus', 'changeCurrentMusicId', 'changeCurrentMusicDetail', 'changePlayMode',
				'changePlayList', 'changeCurrentPlayTime'
			]),
			aa() {
				let seekTime = this.currentMusicLong * this.playingProgress / 100
				this.changeCurrentPlayTime(seekTime)
				this.$playMusic.setMusicPlayingTime(seekTime)
				this.changeMusicPlayStatus(true)
				this.$playMusic.changeMusic()
			},
			getCurrentPlayTime() { //获取当前播放时间
				let crTime = setInterval(() => {
					this.$playMusic.getCurrentPlayTime()
				}, 100)
			},
			// 切换主体显示唱片还是歌词
			changeContent(type) {
				this.contentType = type
			},
			// 播放/暂停音乐
			playMusic() {
				this.changeMusicPlayStatus()
				this.$playMusic.changeMusic()
			},
			// 滑动播放进度条结束时触发
			changeSilder() {
				let seekTime = this.currentMusicLong * this.playingProgress / 100
				this.changeCurrentPlayTime(seekTime)
				this.$playMusic.setMusicPlayingTime(seekTime)
				this.changeMusicPlayStatus(true)
				this.$playMusic.changeMusic()
			},
			// 获取当前播放模式信息
			getPlayMode(mode) {
				let detail = this.playModeList.find(item => item.mode == mode)
				return detail
			},
			// 切换播放模式
			changeMode() {
				switch (this.playMode) {
					case 'loop':
						this.changePlayMode('random')
						break;
					case 'random':
						this.changePlayMode('singleLoop')
						break;
					case 'singleLoop':
						this.changePlayMode('loop')
						break;
				}
			},
			// 切歌(上一首、下一首)
			changeMusicByBtn(type) {
				let musicId = ''
				let index = this.currentPlayList.findIndex((item, index) => item.id == this.currentMusicId)
				// 列表循环|单曲循环模式下的上一首/下一首逻辑
				if (this.playMode == 'loop' || this.playMode == 'singleLoop') {
					if (type == 'last') {
						if (index == 0) {
							musicId = this.currentPlayList[this.currentPlayList.length - 1].id
							this.changeCurrentMusicId(musicId)
						} else {
							musicId = this.currentPlayList[index - 1].id
							this.changeCurrentMusicId(musicId)
						}
					} else {
						if (index == this.currentPlayList.length - 1) {
							musicId = this.currentPlayList[0].id
							this.changeCurrentMusicId(musicId)
						} else {
							musicId = this.currentPlayList[index + 1].id
							this.changeCurrentMusicId(musicId)
						}
					} // 随机播放模式下的上一首/下一首逻辑
				} else if (this.playMode == 'random') {
					let rd = Math.floor(Math.random() * (this.currentPlayList.length - 1))
					musicId = this.currentPlayList[rd].id
					this.changeCurrentMusicId(musicId)
					console.log(this.currentMusicId)
				}
			},
			// 喜欢/取消喜欢歌曲
			likeMusic() {
				this.like = !this.like
				likeMusic(this.currentMusicId,this.like ? true : false)
			},
			// 跳转评论
			toComments() {
				uni.navigateTo({
					url: `/pages/music/comments?type=singleSong&id=${this.currentMusicDetail.id}`
				})
			},
			// 播放mv
			playMv() {
				if(this.currentMusicDetail.mv == 0) {
					return uni.showToast({
						title: '该歌曲暂无mv资源',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: `/pages/video/MV/mvDetail?id=${this.currentMusicDetail.mv}`,
					})
				}
			},
			// 显示播放列表
			showPlayList() {
				this.playListPopup = true
			},
			// 点击播放列表切歌
			changeMusic(id) {
				this.changeCurrentMusicId(id)
			},
			// 删除播放列表内歌曲
			delPlayListSong(index) {
				this.currentPlayList.splice(index, 1)
				this.changePlayList(this.currentPlayList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.6);
	}
	.mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		filter: blur(100rpx);
		view {
			height: 100%;
			width: 100%;
			background-color: rgba(0,0,0,.5);
			// opacity: 0.8;
		}
	}
	
	.pageee {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 15;
	}

	.musicInfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding-right: 80rpx;
		color: #fff;

		// background-color: #000;
		text {
			&:first-child {
				font-size: 34rpx;
				color: #fff;
				// font-weight: bolder;
			}

			&:last-child {
				font-size: 26rpx;
				color: #ccc;
			}
		}
	}

	.content {
		width: 750rpx;

		.hgBox {
			position: relative;
			width: 750rpx;
			height: 100%;
			padding: 20rpx 50rpx;

			.hgBar {
				position: absolute;
				display: flex;
				justify-content: center;
				width: 650rpx;
				height: 400rpx;
				z-index: 20;

				// background-color: #000;
				image {
					height: 400rpx;
					width: 220rpx;
					margin-left: 150rpx;
					margin-top: -50rpx;
				}
			}

			.hgCover {
				position: absolute;
				width: 600rpx;
				height: 600rpx;
				left: 75rpx;
				top: 170rpx;
				border-radius: 50%;
				animation: rotate 23s linear infinite;
				z-index: 10;

				image {
					&:first-child {
						position: absolute;
						top: 0;
						left: 0;
						width: 600rpx;
						height: 600rpx;
						border-radius: 50%;
						z-index: 11;
					}

					&:last-child {
						position: absolute;
						top: 110rpx;
						left: 110rpx;
						width: 380rpx;
						max-width: 380rpx;
						height: 380rpx;
						max-height: 380rpx;
						border-radius: 50%;
						z-index: 10;
					}
				}
			}
		}

		.lyricBox {
			width: 750rpx;
			height: 100%;
			// overflow: hidden;
		}
	}

	.operation {
		position: absolute;
		left: 0;
		bottom: 170rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 100rpx;

		image {
			width: 40rpx;
		}
	}

	.playingProgress {
		position: absolute;
		left: 0;
		bottom: 120rpx;
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 50rpx;
		font-size: 22rpx;
		color: #fff;

		.slider {
			width: 530rpx;
		}

		text {
			width: 50rpx;
			margin: 0 30rpx;

			&:last-child {
				color: #ccc;
			}
		}
	}

	.musicControl {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;

		// background-color: #ccc;
		.image {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 120rpx;

			image {
				width: 40%;
			}
		}
	}

	.playListPopup {
		.popupHeader {
			position: fixed;
			padding: 30rpx 20rpx 0;
			top: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 690rpx;
			height: 100rpx;
			background-color: #fff;
			z-index: 10;

			.title {
				display: flex;
				align-items: center;
			}

			.playMode {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
				}

				text {
					margin-left: 14rpx;
					font-size: 26rpx;
				}
			}
		}

		.playList {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 650rpx;
			height: 80rpx;

			&:first-child {
				margin-top: 50rpx;
			}

			.songInfo {
				width: 610rpx;
				height: 80rpx;
				line-height: 80rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				text {
					&:last-child {
						margin-left: 8rpx;
						font-size: 26rpx;
					}
				}

				image {
					width: 25rpx;
					margin-right: 10rpx;
				}
			}

			.del {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40rpx;
				height: 80rpx;
				z-index: 1;

				image {
					width: 30rpx;
				}
			}
		}

		.playing {
			color: #fe5756 !important;
		}

		/deep/ scroll-view {
			padding: 26rpx 20rpx !important;
		}
	}

	.paused-bar {
		transform: rotate(-30deg);
		transform-origin: center 0;
		transition: 1s;
	}

	.playing-bar {
		transform: rotate(-5deg);
		transform-origin: center 0;
		transition: 1s;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}

	.running {
		animation-play-state: running !important;
	}

	.paused {
		animation-play-state: paused !important;
	}
	
</style>
